<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级</title>
</head>
<body>

    <ol class="classes"></ol>

    <script type="text/javascript">

        let classes = [{
            "name": "计算机一班",
            "students": [
                    { "id": 8526, "name": "秋香", "gender": "女" },
                    { "id": 9527, "name": "华安", "gender": "男" }
                ]
            }, {
            "name": "计算机二班",
            "students": [
                { "id": 6666, "name": "华文", "gender": "男" },
                { "id": 8888, "name": "华武", "gender": "男" }
            ]
        }];

        const classArea = document.querySelector( '.classes' );

        classes.forEach( clazz => {
            let li = document.createElement( 'li' );
            li.innerHTML = clazz.name ;

            let ol = document.createElement( 'ol' );
            ol.style.listStyleType = 'lower-roman' ;

            clazz.students.forEach( student => {
                let stuLi = document.createElement( 'li' );

                stuLi.innerHTML = student.id + ',' + student.name +',' + student.gender 

                ol.appendChild( stuLi );
            });

            li.appendChild( ol );

            classArea.appendChild( li );
        });

    </script>
    
</body>
</html>